<template>
  <div ref="chartRef" :style="{ height, width }" class="data-report-pie"></div>
</template>

<script lang="ts" setup>
  import { PropType, ref, Ref, onMounted,watchEffect,computed } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'

  const props = defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 78px)',
    },
    params:{
      type: Object as PropType<any>,
      default: () => {
        return {}
      }
    }
  })
  const { color, text } = props.params
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

  // 获取正确率位置
  function positionFun(data) {
    if(!data) return '60%'
    let isNumber =  typeof data === 'number'
    if(isNumber){
      data = String(data)
    }
    if (data.length == 2) {
      return '66%'
    } else if (data.length == 3) {
      return '73%'
    } else if (data.length == 4) {
      return '75%'
    }else if (data.length == 5) {
      return '82%'
    }
    return '60%'
  }

  function init(){
    const { correctRate, total,graphicText } = props.params
    const option = {
      grid: {
        top: 10,
      },
      graphic:[
        {
          type: 'text',
          z: 100,
          left: 'center',
          top: '33%', // 调节这里可以控制文案垂直方向的位置
          style: {
            fill: '#1D2129',
            text: graphicText,
            fontSize: 24,
            fontWeight: '700',
          },
        },
        {
          type: 'text',
          z: 100,
          left: positionFun(graphicText),
          top: '43%', // 调节这里可以控制文案垂直方向的位置
          style: {
            fill: '#1D2129',
            text: '%',
            fontSize: 12,
          },
        },
        {
          type: 'text',
          z: 100,
          left: 'center',
          top: '60%', // 调节这里可以控制文案垂直方向的位置
          style: {
            fill: '#333',
            text: text,
            fontSize: 11,
          },
        },
      ],
      series: [
        {
          type: 'pie',
          radius: ['85%', '100%'],
          center: ['50%', '50%'],
          // 环的位置
          label: {
            show: false,
            position: 'center',
          },
          hoverAnimation: false,
          itemStyle: {
            borderRadius: 20, // 设置圆角大小
          },
          data: [
            {
              value: correctRate, // 需要显示的数据
              itemStyle: {
                color: color,
              },
            },
            {
              value: valueShow(total,correctRate),
              // 不需要显示的数据，颜色设置成和背景一样
              itemStyle: {
                color: '#E9EDEF',
              },
            },
          ],
        }
      ]
    }
    setOptions(option)
  }

  function valueShow(total,correctRate){
    if(!correctRate){
      return total || 1
    }else{
      return total - correctRate
    }
  }
  
  watchEffect(() => {
    init()
  })
</script>

<style lang="less" scoped>
.data-report-pie{
  .formatter-title{
    margin: 0 0 0 10px;
    span{
      width: 12px !important;
      height: 12px !important;
      border-radius: 2px !important;
    }
  }
  .formatter-div{
    margin: 0 10px;
    color: #333;
    display: flex;
    .percentage{
      margin-left: 15px;
      width: 50px;
      font-weight: bold;
      margin-bottom: 6px;
    }
    .people{
      width: 45px;
      font-weight: bold;
      text-align: left;
    }
  }
}
</style>